<template>
  <div>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="未完成" name="1">
        <div class="xbox" v-for="(item, index) in $store.state.unfinish" :key="index">
          <input type="checkbox" @click="addy(index)"/>
          {{ item }}
          <button @click="delq(index)">取消</button>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已完成" name="2">
        <div class="xbox" v-for="(item, index) in $store.state.completed" :key="index">
          <input type="checkbox" @click="cwy(index)" checked=checked/>
          {{ item }}
          <span>时间</span>
        </div>
      </van-collapse-item>
      <van-collapse-item title="已取消" name="3">
        <div class="xbox" v-for="(item, index) in $store.state.canceled" :key="index">
          <input type="checkbox" />
          {{ item }}
          <button @click="recover(index)">恢复</button>
        </div>
      </van-collapse-item>
    </van-collapse>
  </div>
</template>

<script>
export default {
  components: {},
  name: "",
  data() {
    return {
      activeNames: ["1"],
    };
  },
  mounted() {},
  methods: {
    //点击已完成
    addy(index){
      this.$store.commit('addy',index)
    },
    //点击取消
    delq(index){
      this.$store.commit('delq',index)
    },
    //点击恢复
    recover(index){
      this.$store.commit('recover',index)
    },
    //点击未完成
    cwy(index){
      this.$store.commit('cwy',index)
    }
  },
  computed: {},
  watch: {},
};
</script>

<style lang="scss" scoped>
.xbox {
  border-bottom: solid 1px #d4d4d4;
  display: flex;
  justify-content: space-between;
  padding: 0 40px 0 0;
}
.van-cell{
    background-color: pink;
}
.van-collapse-item{
  background-color: pink;
}
</style>
